<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/5/31
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>销售报表-柱状图</title>
    <script src="/js/plugins/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        window.onload = function () {

            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));


            var option = {
                title:{
                    text:"销售报表",
                    x:"center",
                    subtext:"${groupName}"
                },
                tooltip: {
                    show: true
                },
                toolbox:{
                    show :true,
                    feature:{
                        mark:{
                            show:true
                        },
                        dataView :{
                            show:true,
                            readOnly:true
                        },
                        magicType:{
                            show :true,
                            type:['line','bar']
                        },
                        restore:{
                            show :true
                        },
                        saveAsImage:{
                            show :true
                        }
                    }

                },
                legend: {
                    data: ['销量'],
                    x:'left'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ${groupTypes}
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        "name": "销量总额",
                        "type": "bar",
                        "data": ${totalAmounts},
                        markPoint:{
                            data:[
                                {type :'max',name: '最大值' },
                                {type :'min',name: '最小值' }
                            ]
                        },
                        markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                    }
                ],

            };

            // 为echarts对象加载数据
            myChart.setOption(option);
        };


    </script>


</head>
<body>
<div id="main" style="height:550px ;width:750px "></div>
</body>
</html>
